<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

// 获取路由参数和路由实例
const route = useRoute()
const router = useRouter()
const movieId = ref(route.params.id)
const movie = ref(null)
const loading = ref(true)

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取电影详情
const getMovieDetail = async () => {
  try {
    loading.value = true
    const response = await axios.get(`http://db.etoak.com:9527/seat/selectAllMovie`)
    if (response.data.flag) {
      // 从所有电影中找到匹配ID的电影
      const foundMovie = response.data.data.find(item => item.id === Number(movieId.value))
      if (foundMovie) {
        movie.value = {
          id: foundMovie.id,
          title: foundMovie.name,
          poster: foundMovie.posters.replace(/`/g, ''),
          description: foundMovie.synopsis,
          longTime: foundMovie.longTime,
          boxOffice: foundMovie.boxOffice,
          director: foundMovie.director,
          actors: foundMovie.actors,
          releaseDate: foundMovie.releaseDate,
          category: foundMovie.category
        }
      }
    }
  } catch (error) {
    console.error('获取电影详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取电影详情
onMounted(() => {
  getMovieDetail()
})
</script>

<template>
  <div class="movie-detail-page">
    <!-- 顶部导航栏 -->
    <el-header style="background-color: #2c3e50; color: white; display: flex; align-items: center; padding: 0 20px;">
      <el-button style="color: white; background: gray; font-size: 18px; padding: 8px 12px; margin-right: 10px; border-radius: 4px;" @click="goBack">返回</el-button>
      <span style="margin-left: 20px; font-size: 18px; font-weight: bold;">电影详情</span>
    </el-header>

    <!-- 主体内容 -->
    <el-main style="padding: 20px;">
      <el-card v-if="!loading" style="width: 100%; border-radius: 10px; overflow: hidden;">
        <div class="movie-detail-container" style="display: flex; flex-wrap: wrap;">
          <!-- 电影海报 -->
          <div class="movie-poster" style="width: 300px; margin-right: 30px;">
            <img :src="movie.poster" alt="{{ movie.title }}" style="width: 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);" />
          </div>

          <!-- 电影信息 -->
          <div class="movie-info" style="flex: 1; min-width: 300px;">
            <h2 style="font-size: 28px; margin-bottom: 15px; color: #333;">{{ movie.title }}</h2>
            
            <div class="info-row" style="margin-bottom: 12px; display: flex; flex-wrap: wrap;">
              <span style="background-color: #f0f2f5; padding: 4px 8px; border-radius: 4px; margin-right: 10px; margin-bottom: 5px;">{{ movie.category }}</span>
              <span style="background-color: #f0f2f5; padding: 4px 8px; border-radius: 4px; margin-right: 10px; margin-bottom: 5px;">{{ movie.longTime }}分钟</span>
              <span style="background-color: #f0f2f5; padding: 4px 8px; border-radius: 4px; margin-bottom: 5px;">上映日期: {{ movie.releaseDate }}</span>
            </div>

            <div class="info-item" style="margin-bottom: 10px;">
              <span style="font-weight: bold; color: #666; display: inline-block; width: 70px;">导演:</span>
              <span>{{ movie.director }}</span>
            </div>

            <div class="info-item" style="margin-bottom: 10px;">
              <span style="font-weight: bold; color: #666; display: inline-block; width: 70px;">主演:</span>
              <span>{{ movie.actors }}</span>
            </div>

            <div class="info-item" style="margin-bottom: 10px;">
              <span style="font-weight: bold; color: #666; display: inline-block; width: 70px;">票房:</span>
              <span>{{ movie.boxOffice }}万</span>
            </div>

            <div class="movie-description" style="margin-top: 20px;">
              <h3 style="font-size: 18px; margin-bottom: 10px; color: #333;">剧情简介</h3>
              <p style="line-height: 1.7; color: #666; text-indent: 2em;">{{ movie.description }}</p>
            </div>
          </div>
        </div>
      </el-card>

      <div v-else style="display: flex; justify-content: center; align-items: center; height: 400px;">
        <el-spinner size="large" />        
      </div>
    </el-main>
  </div>
</template>

<style scoped>
.movie-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>